import React, { useState } from 'react';
import { Button, Modal } from 'antd';
import { Input } from 'antd';
import { getAllCompanyIntroduce, updateCompanyName, changeCompanyIntroduce } from '@/api/setting'
import { useEffect } from 'react';
import { message } from 'antd';

const { TextArea } = Input;

const options = [
  { label: '公司名称', value: 'name' },
  { label: '公司介绍', value: 'introduce' },
  { label: '公司架构', value: 'framework' },
  { label: '公司战略', value: 'strategy' },
  { label: '公司高层', value: 'manage' },
];

const Index = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalType, setModalType] = useState({});
  const [inputValues, setInputValues] = useState({
    name: '',
    introduce: '',
    framework: '',
    strategy: '',
    manage: '',
  });

  const fetchData = async () => {
    getAllCompanyIntroduce().then((res) => {
      const data = res.data.reduce((acc, cur) => {
        const key = options.find((item) => item.label === cur.set_name).value
        if (cur.set_name === '公司名称') {
          acc[key] = cur.set_value
        } else {
          acc[key] = cur.set_text
        }
        return acc
      }, {})
      setInputValues(data)
    })
  };

  useEffect(() => {
    fetchData()
  }, []);

  const showModal = (type) => {
    const item = options.find((option) => option.value === type) || '';
    setModalType(item);
    setIsModalOpen(true);
  };

  const handleOk = async () => {
    try {
      if (modalType.label === '公司名称') {
        updateCompanyName({ set_value: inputValues.name }).then(res => {
          if (res.status === 0) {
            fetchData()
          }
        })
      }
      if (modalType.label === '公司介绍') {
        changeCompanyIntroduce(inputValues.introduce, 8).then(res => {
          if (res.status === 0) {
            fetchData()
          }
        })
      }
      if (modalType.label === '公司架构') {
        changeCompanyIntroduce(inputValues.introduce, 9).then(res => {
          if (res.status === 0) {
            fetchData()
          }
        })
      }
      if (modalType.label === '公司战略') {
        changeCompanyIntroduce(inputValues.introduce, 10).then(res => {
          if (res.status === 0) {
            fetchData()
          }
        })
      }
      if (modalType.label === '公司高层') {
        changeCompanyIntroduce(inputValues.introduce, 11).then(res => {
          if (res.status === 0) {
            fetchData()
          }
        })
      }
      message.success('修改成功')
      setIsModalOpen(false);
    } catch (error) {
      console.error('Error updating company information:', error);
    }

  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setInputValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  return (
    <div>
      <div style={{ maxWidth: 600 }}>
        <div style={{ marginBottom: 16 }}>
          <span style={{ display: 'inline-block', width: '120px' }}>公司名称:</span>
          <Button type='primary' onClick={() => showModal('name')} style={{ marginLeft: '10px' }}>编辑公司名称</Button>
        </div>
        <div style={{ marginBottom: 16 }}>
          <span style={{ display: 'inline-block', width: '120px' }}>公司介绍:</span>
          <Button type='primary' onClick={() => showModal('introduce')} style={{ marginLeft: '10px' }}>编辑公司介绍</Button>
        </div>
        <div style={{ marginBottom: 16 }}>
          <span style={{ display: 'inline-block', width: '120px' }}>公司架构:</span>
          <Button type='primary' onClick={() => showModal('framework')} style={{ marginLeft: '10px' }}>编辑公司架构</Button>
        </div>
        <div style={{ marginBottom: 16 }}>
          <span style={{ display: 'inline-block', width: '120px' }}>公司战略:</span>
          <Button type='primary' onClick={() => showModal('strategy')} style={{ marginLeft: '10px' }}>编辑公司战略</Button>
        </div>
        <div style={{ marginBottom: 16 }}>
          <span style={{ display: 'inline-block', width: '120px' }}>公司高层:</span>
          <Button type='primary' onClick={() => showModal('manage')} style={{ marginLeft: '10px' }}>编辑现任高层</Button>
        </div>
      </div>

      {/* 取消注释并正常使用 Modal 组件 */}
      <Modal title={`编辑 ${modalType.label}`} destroyOnClose open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <TextArea
          rows={4}
          placeholder='请输入内容'
          name={modalType.value}
          value={inputValues[modalType.value]}
          onChange={handleInputChange}
        />
      </Modal>
    </div>
  );
};

export default Index;
